import { Card, Row, Col, Statistic, Progress, Button } from 'antd';
import { useState, useEffect } from 'react';
import { Server, Cpu, HardDrive, Wifi, Activity } from 'lucide-react';
import { motion } from 'framer-motion';
import { Play, Square, RotateCcw, MoreHorizontal } from 'lucide-react';

const Dashboard = () => {

  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }} 
      animate={{ opacity: 1, y: 0 }} 
      transition={{ duration: 0.6 }}
      className="space-y-6"
      style={{ width: '100%', overflow: 'hidden' }}
    >
      {/* 欢迎卡片 */}
      <div className="card-container">
        <Card className="card ">
          <div className="text-center space-y-4">
            <h1 className="text-gradient text-3xl font-bold">欢迎使用 Ac.God-Panel</h1>
            <p className="text-text-secondary text-lg">一键搭建、管理您的 SCUM 游戏服务器</p>
            <div className="flex justify-center space-x-4">
              <Button type="primary" size="large" className="btn-primary">
                开始安装
              </Button>
              <Button size="large" className="btn-secondary">
                查看文档
              </Button>
            </div>
          </div>
        </Card>
      </div>

      {/* 系统状态卡片 */}
      <Row gutter={[12, 12]} style={{ margin: 0, width: '100%' }}>
        <Col xs={24} sm={12} lg={6} style={{ padding: '6px' }}>
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.1 }}
            className="statistic-card"
          >
            <Card className="card card-hover">
              <Statistic
                title="总内存"
                value={16}
                suffix="GB"
                prefix={<Activity size={20} className="text-accent-500" />}
                valueStyle={{ color: '#10B981' }}
              />
              <div className="mt-2 text-sm text-text-secondary">
                已使用: 10.8 GB (68%)
              </div>
            </Card>
          </motion.div>
        </Col>
        
        <Col xs={24} sm={12} lg={6} style={{ padding: '6px' }}>
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.2 }}
            className="statistic-card"
          >
            <Card className="card card-hover">
              <Statistic
                title="SCUM服务器占用"
                value={4.2}
                suffix="GB"
                prefix={<Server size={20} className="text-accent-500" />}
                valueStyle={{ color: '#F59E0B' }}
              />
              <div className="mt-2 text-sm text-text-secondary">
                占用率: 26.3%
              </div>
            </Card>
          </motion.div>
        </Col>
        
        <Col xs={24} sm={12} lg={6} style={{ padding: '6px' }}>
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.3 }}
            className="statistic-card"
          >
            <Card className="card card-hover">
              <Statistic
                title="剩余CPU"
                value={65}
                suffix="%"
                prefix={<Cpu size={20} className="text-accent-500" />}
                valueStyle={{ color: '#3B82F6' }}
              />
              <Progress percent={35} showInfo={false} strokeColor="#3B82F6" />
            </Card>
          </motion.div>
        </Col>
        
        <Col xs={24} sm={12} lg={6} style={{ padding: '6px' }}>
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.4 }}
            className="statistic-card"
          >
            <Card className="card card-hover">
              <Statistic
                title="剩余磁盘空间"
                value={156.7}
                suffix="GB"
                prefix={<HardDrive size={20} className="text-accent-500" />}
                valueStyle={{ color: '#10B981' }}
              />
              <div className="mt-2 text-sm text-text-secondary">
                总容量: 500 GB
              </div>
            </Card>
          </motion.div>
        </Col>
      </Row>

      {/* 服务器状态卡片 */}
      <Row gutter={[12, 12]} style={{ margin: 0, width: '100%' }}>
        <Col xs={24} lg={12} style={{ padding: '6px' }}>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="card-container"
          >
            <Card 
              title="服务器状态" 
              className="card card-hover"
              extra={<Wifi size={20} className="text-accent-500" />}
            >
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">服务器状态:</span>
                  <div className="flex items-center">
                    <span className="inline-block w-2 h-2 bg-accent-500 rounded-full mr-2"></span>
                    <span className="text-accent-500 font-medium">运行中</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">在线玩家:</span>
                  <span className="text-text-primary font-medium">12/50</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">运行时间:</span>
                  <span className="text-text-primary font-medium">3天 14小时</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">最后更新:</span>
                  <span className="text-text-primary font-medium">2分钟前</span>
                </div>
              </div>
            </Card>
          </motion.div>
        </Col>
        
        <Col xs={24} lg={12} style={{ padding: '6px' }}>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6 }}
            className="card-container"
          >
            <Card 
              title="网络状态" 
              className="card card-hover"
              extra={<Activity size={20} className="text-accent-500" />}
            >
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">网络延迟:</span>
                  <span className="text-text-primary font-medium">45ms</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">上传速度:</span>
                  <span className="text-text-primary font-medium">2.5 MB/s</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">下载速度:</span>
                  <span className="text-text-primary font-medium">8.1 MB/s</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-text-secondary">连接状态:</span>
                  <div className="flex items-center">
                    <span className="inline-block w-2 h-2 bg-accent-500 rounded-full mr-2"></span>
                    <span className="text-accent-500 font-medium">稳定</span>
                  </div>
                </div>
              </div>
            </Card>
          </motion.div>
        </Col>
      </Row>
    </motion.div>
  );
};

export default Dashboard; 